<template>
  <div>
    <p class="box-head">房源统计分析</p>
    <el-row  class="rowCon" type="flex" align="start" justify="space-around"  :gutter="20">
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>房源量统计</span>
        </div>
        <el-row type="flex" justify="space-around" :gutter="10">
          <div>
            <p>房源总数</p>
            <p>{{houseAmountInfo.sumHouse}}</p>
          </div>
          <div style="">
            <p>出售房源数</p>
            <p>{{houseAmountInfo.sellHouse}}</p>
          </div>
          <div style="">
            <p>出租房源数</p>
            <p>{{houseAmountInfo.rentHouse}}</p>
          </div>
          <div style="">
            <p>租售房源</p>
            <p>{{houseAmountInfo.rentalHouse}}</p>
          </div>
        </el-row>
        <!-- 房源量统计 -->
        <chart :chartStyle="'min-width:20rem;min-height:25rem;height:25rem'"  ref="houseAmount" :option="houseAmountOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>区域房源分布</span>
        </div>
        <!-- 区域房源分布 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="regionalHouse" :option="regionalHouseOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>房源类型占比</span>
        </div>
        <!-- 区域房源分布 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="typeHouse" :option="typeHouseOption" />      
      </el-card>
    </el-row>
    <el-row  class="rowCon" type="flex" align="start"  justify="space-around" :gutter="20">
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>房源户型占比分析</span>
        </div>
        <!-- 房源户型占比分析 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="houseFamily" :option="houseFamilyOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>房源分析</span>
        </div>
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="propertiesAnalysis" :option="propertiesAnalysisOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>房源来源分析</span>
        </div>
         <!-- 房源来源分析 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="sourceHouse" :option="sourceHouseOption" />
      </el-card>
    </el-row>
    <el-row class="rowCon" style="padding:10px 50px" type="flex" align="start"  justify="start">
      <condition-chart></condition-chart>
    </el-row>
  </div>
</template>
<script>
var startTime = "";
var endTime = "";
import chart from "../../../../components/Charts/chart";
import conditionChart from "./my-compents/conditionChart.vue";
import {
  GetDataProfileInfo, //数据基础情况
  GetDataByDoubleTargetForTwo, //双向指标统计
  GetDataByTargetForTwo,//单项指标统计
} from "@/api/flh/home";
import { mapGetters } from "vuex";
export default {
  name: "propertiesAnalysis",
  components: {
    chart,
    conditionChart
  },
  data() {
    return {
      houseAmountInfo: {
        sumHouse: "", //房源总数
        rentHouse: "", //出租房源
        sellHouse: "", //出售房源
        rentalHouse: "" //租售房源
      },
      houseAmountOption: {}, //房源量图表
      regionalHouseOption: {}, //区域房源分布
      typeHouseOption: {}, //房源类型占比
      houseFamilyOption: {}, //房源户型占比
      propertiesAnalysisOption: {}, //房源分析
      sourceHouseOption: {}, //房源来源分析
      startTime: "",
      endTime: "",
      params: {
        //查询房源指标数据
        startTime: startTime,
        endTime: endTime,
        queryType: "" //18001门店 18002员工 18003房源 18004客源 18005成交量 18006成交总收入18007共享营销
      },
      houseAmountParams: {
        startTime: startTime,
        endTime: endTime,
        queryType: "18003" //queryType:查询指标 18008区域房源分布（房源分析） 18010房屋户型占比（房源分析） 18011房源类型占比分析（房源分析） 18013区域客源量分（客源分析） 18016共享营销客源线索（客源分析） 18018成交户型统计 （交易分析） 18019区域类型成交（交易分析） 18021 区域成交户型（交易分析）
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  computed: {
    ...mapGetters(["gTime"])
  },
  watch: {
    gTime(val) {
      this.fetchData();
    }
  },
  methods: {
    //房源分析
   async fetchPropertiesAnalysisOption(){ 
        this.setDataTime("params",'18012');
        try {
          var res = await GetDataByTargetForTwo(self.params);
          if (res.data.code === "0") {
            var resData = res.data.result;
                       

            this.initPropertiesAnalysisOptionChart(resData);
          }
        } catch (e) {
          console.log(e);
        }
   },
    //房源户型占比分析
   async fetchHouseFamily(){
        var self = this;
        this.setDataTime("params",'18010');
        try {
          var res = await GetDataByDoubleTargetForTwo(self.params);
          if (res.data.code === "0") {
            var resData = res.data.result;
            this.initHouseFamilyChart(resData);
          }
        } catch (e) {
          console.log(e);
        }
    },
    //房源户型占比分析
    async fetchTypeHouse() {
        var self = this;
        this.setDataTime("params",'18011');
        try {
          var res = await GetDataByDoubleTargetForTwo(self.params);
          if (res.data.code === "0") {
            var resData = res.data.result;
            this.initTypeHouseChat(resData);
          }
        } catch (e) {
          console.log(e);
        }
    },
    // 区域房源分布
    async fetchRegionalHouse() {
      var self = this;
      this.setDataTime("params",'18008');
      try {
        var res = await GetDataByDoubleTargetForTwo(self.params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.initRegionalHouseChart(resData);
        }
      } catch (e) {
        console.log(e);
      }
    },
    //房源基础数据
    async fetchHouseAmount() {
      this.setDataTime("houseAmountParams");
      var self = this;
      try {
        var res = await GetDataProfileInfo(self.houseAmountParams);
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.initHouseAmountChart(resData);
        }
        console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
    //房源来源分析
    initSourceHouseChart() {
      var data = [
        { value: 8, name: "自然来访", type: "pie" },
        { value: 8, name: "共享营销", type: "pie" },
        { value: 18, name: "转介绍", type: "pie" },
        { value: 20, name: "驻守", type: "pie" },
        { value: 30, name: "派单", type: "pie" },
        { value: 20, name: "窗体广告", type: "pie" },
        { value: 40, name: "分配", type: "pie" },
        { value: 50, name: "网站", type: "pie" },
        { value: 100, name: "其他", type: "pie" }
      ];
      var initData = {
        //需要给我传的数据
        yData: [data],
        pieName: "房源销量分布",
        legend: [],
        refName: "sourceHouse",
        returnOption: "sourceHouseOption",
        textColor: "black",
        radius: ["40%", "60%"],
        center: ["50%", "50%"],
        label: {
          normal: {
            position: "outside",
            formatter: "{b}\n{d}% \n{c}\r(套) ",
            fontSize: 15
          }
        }
      };
      this.forEachFun(initData);
    },
    //房源分析
    initPropertiesAnalysisOptionChart(res) {
      var xData = []
      var data1 = {
        data:[],
        type:'bar'
      }
      res.list.forEach(item=>{
        xData.push(item.name)
        data1.data.push(item.value)
      })
      var initData = {
        //需要给我传的数据
        // exchange:true,//xy轴数据互换
        xData: xData,
        yData: [data1],
        color: [
          "#5282E6",
          "#ABDB9D",
          "#3EB37F",
          "#FECA64",
          "#FF854A",
          "#FF6567",
          "#E870B8"
        ],
        legend: [],
        yAxisName: "套",
        refName: "propertiesAnalysis",
        returnOption: "propertiesAnalysisOption",
        textColor: "black",
        stack: "one",
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "black"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#656a83"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "black"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#656a83"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#656a83"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    //房源户型占比
    initHouseFamilyChart(res) {
      var xData = []
      var dataArr= []
      res.forEach(item=>{
        xData.push(item.name)
      })
      var data1 = {
        data:[],
        type: "bar",
        barWidth: 10
      }
      var data2 = {
        data:[],
        type: "bar",
        barWidth: 10
      }
      var data3 = {
        data:[],
        type: "bar",
        barWidth: 10
      }
      res.forEach(bb=>{
        bb.list.forEach(cc=>{
          switch (cc.name) {
            case "出租":
              data1.data.push(cc.value);
              break;
            case "出售":
              data2.data.push(cc.value);
              break;
            case "租售":
              data3.data.push(cc.value);
              break;
            default:
              break;
          }
        })
      })
      var initData = {
        //需要给我传的数据
        exchange: true, //xy轴数据互换
        xData: xData,
        yData: [data1, data2, data3],
        legend: ["出租房", "出售方", "租售房"],
        refName: "houseFamily",
        returnOption: "houseFamilyOption",
        textColor: "black",
        // stack: "one",
        yAxisName: "(套)",
        unit:'(套)',
        grid: {
          right: "10%"
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "black"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "black"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    initTypeHouseChat(res) {
      var data = []
      res.forEach(item=>{
        var obj = {}
            obj.value = item.value
            obj.name = item.name
            obj.type = 'pie'
         data.push(obj)
      })
      var initData = {
        //需要给我传的数据
        yData: [data],
        pieName: "房源销量分布",
        legendObj: {
          data: ["多层", "小高层", "高层", "洋房", "别墅"],
          bottom: 10
        },
        refName: "typeHouse",
        returnOption: "typeHouseOption",
        textColor: "white",
        radius: "60%",
        center: ["50%", "50%"],
        label: {
          normal: {
            // position: "inner",
            formatter: "{b}\n{d}% \n{c}\r(套) ",
            fontSize: 15
          }
        }
      };
      this.forEachFun(initData);
    },
    //区域房源分布
    initRegionalHouseChart(res) {
      var xData = [];
      var data1 = {
        data: [],
        type: "bar"
      };
      var data2 = {
        data: [],
        type: "bar"
      };
      var data3 = {
        data: [],
        type: "bar"
      };
      res.forEach(item => {
        xData.push(item.name);
        item.list.forEach(aa => {
          switch (aa.name) {
            case "出租":
              data1.data.push(aa.value);
              break;
            case "出售":
              data2.data.push(aa.value);
              break;
            case "租售":
              data3.data.push(aa.value);
              break;
            default:
              break;
          }
        });
      });
      var initData = {
        //需要给我传的数据
        exchange: true, //xy轴数据互换
        xData: xData,
        yData: [data1, data2, data3],
        color: ["#FEAA40", "#FA4361", "blue"],
        legend: ["出租房", "出售房", "租售房"],
        refName: "regionalHouse",
        returnOption: "regionalHouseOption",
        textColor: "black",
        stack: "one",
        yAxisName: "(套)",
        unit: "套",
        grid: {
          left: "15%"
        },
        xAxisLine: {
          axisLabel: {
            textStyle: {
              color: "black"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "#262544"
            }
          }
        },
        yAxisLine: {
          axisLabel: {
            textStyle: {
              color: "black"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#262544"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#262544"
            }
          }
        }
      };
      this.forEachFun(initData);
    },
    forEachFun(initData) {
      //处理数据生成Option
      var option = this.$utils.returnItemSeries(initData);
      this.$set(this, initData.returnOption, option);
      var self = this;
      setTimeout(function() {
        if (self.$refs[initData.refName][0]) {
          self.$refs[initData.refName][0].initChart();
        } else {
          self.$refs[initData.refName].initChart();
        }
      }, 0);
    },
    //房源量图表
    initHouseAmountChart(res) {
      var self = this;
      self.houseAmountInfo.sumHouse = res.targetGross;
      var data = [];
      res.targetDetailList.forEach(item => {
        var obj = {};
        obj.value = item.value;
        obj.name = item.xData + "(套)";
        obj.type = "pie";
        switch (item.xData) {
          case "租售":
            self.houseAmountInfo.rentalHouse = item.value;
            break;
          case "出租":
            self.houseAmountInfo.rentHouse = item.value;
            break;
          case "出售":
            self.houseAmountInfo.sellHouse = item.value;
            break;
          default:
            break;
        }
        data.push(obj);
      });
      var initData = {
        //需要给我传的数据
        yData: [data],
        pieName: "房源销量分布",
        legend: [],
        refName: "houseAmount",
        returnOption: "houseAmountOption",
        textColor: "white",
        radius: "80%",
        center: ["50%", "50%"],
        label: {
          normal: {
            position: "inner",
            formatter: "{b}\n{d}% \n{c}\r(套) ",
            fontSize: 15
          }
        }
      };
      this.forEachFun(initData);
    },
    setDataTime(name,num) {
      this[name].startTime = this.$store.getters.gTime[0];
      this[name].endTime = this.$store.getters.gTime[1];
      if(num){
        this[name].queryType = num
      }
    },
    //获取数据
    fetchData() {
      //房源量统计
      this.fetchHouseAmount();
      //区域房源分布
      this.fetchRegionalHouse();
      //房源类型占比
      this.fetchTypeHouse();
      //房源户型占比分析
      this.fetchHouseFamily();
      //房源分析
      // this.fetchPropertiesAnalysisOption()


      this.initSourceHouseChart();
    },
    //跳页面
    pushPage(name) {
      this.$router.push({
        path: name
      });
    }
  }
};
</script>
<style scoped>
@import "../main.css";
</style>
